<template>
  <div id="app">
    <!-- 导航栏 - 仅在非登录页面显示 -->
    <nav v-if="!isLoginPage" class="navbar navbar-expand-lg navbar-dark bg-primary">
      <div class="container">
        <router-link class="navbar-brand" to="/"> NestJS Learning Frontend </router-link>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav me-auto">
            <li class="nav-item">
              <router-link class="nav-link" to="/">首页</router-link>
            </li>
            <li class="nav-item">
              <router-link class="nav-link" to="/dashboard">仪表盘</router-link>
            </li>

            <!-- 用户管理下拉菜单 -->
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"> 用户管理 </a>
              <ul class="dropdown-menu">
                <li><router-link class="dropdown-item" to="/users">用户管理</router-link></li>
                <li><router-link class="dropdown-item" to="/roles">角色管理</router-link></li>
              </ul>
            </li>

            <!-- 商品管理下拉菜单 -->
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"> 商品管理 </a>
              <ul class="dropdown-menu">
                <li><router-link class="dropdown-item" to="/products">商品管理</router-link></li>
                <li><router-link class="dropdown-item" to="/categories">分类管理</router-link></li>
                <li><router-link class="dropdown-item" to="/product-list">产品列表</router-link></li>
              </ul>
            </li>

            <!-- 菜单管理 -->
            <li class="nav-item">
              <router-link class="nav-link" to="/menus">菜单管理</router-link>
            </li>

            <!-- 订单管理 下拉 -->
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"> 订单管理 </a>
              <ul class="dropdown-menu">
                <li><router-link class="dropdown-item" to="/orders">订单管理</router-link></li>
                <li><router-link class="dropdown-item" to="/my-orders">我的订单</router-link></li>
                <li><router-link class="dropdown-item" to="/cart">购物车</router-link></li>
              </ul>
            </li>

            <!-- 内容管理 下拉 -->
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"> 内容管理 </a>
              <ul class="dropdown-menu">
                <li><router-link class="dropdown-item" to="/articles">文章管理</router-link></li>
                <li><router-link class="dropdown-item" to="/article-list">文章列表</router-link></li>
                <li><router-link class="dropdown-item" to="/article-create">发布文章</router-link></li>
              </ul>
            </li>

            <!-- 系统管理下拉菜单 -->
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"> 系统管理 </a>
              <ul class="dropdown-menu">
                <li><router-link class="dropdown-item" to="/settings">系统设置</router-link></li>
                <li><router-link class="dropdown-item" to="/logs">系统日志</router-link></li>
              </ul>
            </li>

            <!-- 数据报表 -->
            <li class="nav-item">
              <router-link class="nav-link" to="/reports">数据报表</router-link>
            </li>
          </ul>

          <!-- 右侧用户操作 -->
          <ul class="navbar-nav">
            <!-- 个人中心（右侧） -->
            <li class="nav-item">
              <router-link class="nav-link" to="/profile">个人中心</router-link>
            </li>
            <li class="nav-item nav-link" @click="loginout" style="cursor: pointer">
              <i class="bi bi-box-arrow-in-right me-1"></i>
              退出登录
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- 主内容区域 - 登录页面占满全屏，其他页面使用容器布局 -->
    <main :class="isLoginPage ? 'login-main' : 'container mt-4'">
      <router-view />
    </main>

    <!-- 页脚 - 仅在非登录页面显示 -->
    <footer v-if="!isLoginPage" class="bg-light text-center text-muted py-3 mt-5">
      <div class="container">
        <p>&copy; 2025 NestJS Learning Project. Built with Vue 3 + Bootstrap 5</p>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref, watchEffect } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useAuthStore } from "./stores/auth";

const route = useRoute();
const router = useRouter();
const authStore = useAuthStore();

// 判断是否为登录页面
const isLoginPage = ref(false);

const loginout = () => {
  authStore.signout();
  router.replace("/singin");
};

// 监听路由变化
watchEffect(() => {
  isLoginPage.value = ["/login", "/register"].includes(route.path);
});
</script>

<style scoped>
#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

/* 登录页面主内容区域占满全屏 */
.login-main {
  flex: 1;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100vh;
}

.router-link-active {
  font-weight: bold;
}
</style>
